﻿///<reference Path="MicrosoftAjax.js" />
///<reference Path="MicrosoftMvcAjax.js" />
///<reference Path="jquery-1.5.1.js" />
///<reference Path="jquery.css-transform.js" />
///<reference Path="jquery.rotate3di-0.9.js" />

var fakeEvent = { preventDefault:function() { } };

$(".foo").click(function(e) {
    $(this)
        .animate({height:"100px"}, 1000)
        .animate({widht:"100px"}, 1000);
});

function AjaxReload(context) {
    var d = context.get_data();
    var data = window["eval"]("(" + context.get_data() + ")");
    if (data && data.reload === true) {
        document.location.reload();
    }
}
var fooStuff = "";
var foo = {
    id: 1,
    Name: "Fred",
    DoStuff: function(foo) {
        var x = fooStuff;
    }
};
        
$.keyTips();

$(function () { // onload
    function applyTemplate(template, data) {
        var result = template;
        for (var propName in data) {
            result = result.replace(new RegExp("{" + propName + "}", "g"), data[propName]);
        }
        return result;
    }

    // Lobby pending games auto-refresh
    if ($.trim(document.title) === "HooIzDat: Game Lobby") {
        window.setInterval(function () {
            var el = $("#pendingGamesRefreshLink").get(0);
            if (el) {
                Sys.Mvc.AsyncHyperlink.handleClick(el, fakeEvent,
                    { insertionMode: Sys.Mvc.InsertionMode.replace,
                        updateTargetId: 'pendingGames'
                    });
            }
        }, 5000);
    }

    // Play game auto-refresh
    var waitingRefreshLink = $("#waitingRefreshLink");
    if (waitingRefreshLink.length) {
        window.setInterval(function () {
            //waitingRefreshLink.get(0).onclick();
            var el = waitingRefreshLink.get(0);
            Sys.Mvc.AsyncHyperlink.handleClick(el, fakeEvent,
                { insertionMode: Sys.Mvc.InsertionMode.replace,
                    onSuccess: Function.createDelegate(el, AjaxReload)
                });
        }, 5000);
    }

    // Tile effects
    if ($.trim(document.title) === "HooIzDat: Playing Game") {
        var tileFadeOutTo = 0.5;
        $("#tiles .tile.active, #tiles .tile.closed")
            .filter(".active")
                .css("cursor", "pointer")
                .live("click", function (e) {
                    $(this) // Reset hover fade effect
                        .find(".name").css({ display: "" }).end()
                        .find(".inner")
                            .css({ visibility: "", opacity: 1 });
                    if (!$(e.target).is("input")) { // Submit form
                        $(this).find("form").submit();
                    }
                })
            .end()
            .hover(function (e) { // Mouse over effect
                var $tile = $(this);
                if ($tile.is(".processing")) return;
                if ($tile.is(".closed") && !$tile.parents(".black-out").length) {
                    $tile.css({ backgroundImage: "none" })
                        .find(".name").css({ display: "block" }).end()
                        .find(".inner")
                            .stop()
                            .css({ opacity: 0, visibility: "visible" })
                            .fadeTo(250, tileFadeOutTo);
                }
            }, function (e) { // Mouse out effect
                var $tile = $(this);
                if ($tile.is(".processing")) return;
                if ($tile.is(".closed") && !$tile.parents(".black-out").length) {
                    $tile
                        .find(".name").css({ display: "none" }).end()
                        .find(".inner")
                            .stop()
                            .fadeTo(250, 0, function () {
                                $(this).css({ visibility: "", opacity: "" });
                            })
                        .end()
                        .css({ backgroundImage: "" });
                }
            })
            .find("form")
                .submit(function (e) { // AJAX Form Submit
                    var $this = $(this);
                    var formActionUrl = $this.attr("action");
                    var actionParts = formActionUrl.split("/");
                    var action = actionParts[actionParts.length - 1];
                    if (action === "Guess") return; // Exit if action is to guess
                    $this.parents(".tile").addClass("processing");
                    $.post(formActionUrl, $this.serialize(), function (data) {
                        switch (action) {
                            case "ChangeTileState":
                                $this.attr("action", data.newAction);
                                var isGuess = data.newAction.indexOf("/Guess") >= 0;
                                if (typeof (data.isOpen) === "boolean") {
                                    $this
                                        .parents(".tile")
                                        .rotate3Di(data.isOpen ? 180 : -180, 300, {
                                            sideChange: function () {
                                                $("body").focus(); // this ensures the tile image isn't selected
                                                $(this).css({ backgroundImage: "" })
                                                    .find(".inner") // Reset hover fade effect
                                                        .css({
                                                            opacity: data.isOpen ? 1 : tileFadeOutTo,
                                                            visibility: data.isOpen ? "visible" : "hidden"
                                                        })
                                                    .end()
                                                    .toggleClass("open", data.isOpen)
                                                    .toggleClass("closed", !data.isOpen)
                                                    .find(":image")
                                                        .attr("title", isGuess ? "Guess this person" :
                                                            data.isOpen ? "Close this tile" : "Open this tile")
                                                    .end()
                                                    .find("p.info")
                                                        .text(isGuess ? "Click to Guess!" :
                                                            data.isOpen ? "Click to Close!" : "Click to Open!");
                                            },
                                            complete: function () {
                                                $(this).rotate3Di(0);
                                                $(this).removeClass("processing");
                                            }
                                        });
                                }
                                break;
                            case "Guess":

                                break;
                        }
                    }, "json");

                    e.preventDefault();
                    return false;
                });
    }

    // My Character hover effect
    //    #actionBar #myCharacter:hover {
    //			
    //		}
    //			#actionBar #myCharacter:hover .tile {
    //				width: auto;
    //				height: 127px;
    //			}
    //				#actionBar #myCharacter:hover .tile img {
    //					height: auto;
    //				}
    //				#actionBar #myCharacter:hover .tile .name {
    //					display: block;
    //				}
    $("#myCharacter").hover(function () {
        $(this)
            .find(".tile, .tile img")
        //.css({ width:"auto" })
                .stop()
                .animate({ height: "127px", width: "95" }, 200)
    }, function () {
        $(this)
            .find(".tile, .tile img")
                .stop()
                .animate({ width: "40px", height: "54px" })
    });
});